<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}
	</style>
	<script type="text/javascript">
		window.onload= function () {
			box =  document.getElementById('box');

			btn = document.getElementById("btn");

			btn.onclick = function () {
				if(btn.value=="开始"){
					time = setInterval(run,5);
					btn.value="停止";
				}else{
					clearInterval(time);
					btn.value="开始";
				}
			}
			width= 200;

			fangxiang = true;

			function run() {

				if(width<=200){
					fangxiang =  true;
				}else if(width>=400){
					fangxiang =  false;
				}

				if(fangxiang){
					width+=5;
				}else{
					width-=5;
				}

				box.style.width=width+'px';
				box.style.height=width+'px';
			}
		}
	</script>

	<!-- 1，切换图片 -->
	<!-- 2，移动例子走来走去 -->
	<!-- 3，动态的往表单里面加东西 -->

</head>
<body>
	<input type="button" id="btn" value="开始" name="">
	<div id="box" class="box"></div>
</body>
</html>